<template>
    <h1>Room</h1>
    <div class="container" ref="ContainerRef" :style="{ width: size.width + 'px', height: size.height + 'px' }"></div>
</template>

<script setup lang="ts" name="room">
import { onUnmounted, ref } from 'vue';
import DefaultScene from '../libs/scene2'
import * as THREE from 'three';
import RoomImage from '../images/decoration/00125.jpg'
const defaultScene = new DefaultScene();
const {scene, camera, size} = defaultScene;
/**
 * 初始化
 */
const ContainerRef = ref();
defaultScene.init(ContainerRef);
const axesHelper = new THREE.AxesHelper(350);
scene.add(axesHelper);

/**
 * 业务相关
 */
const GlobalGroup = new THREE.Group();
scene.add(GlobalGroup);
const loader = new THREE.TextureLoader();

const texture = loader.load(RoomImage)

const geometry = new THREE.SphereGeometry(250);
const material = new THREE.MeshBasicMaterial({transparent: true, map: texture, side: THREE.DoubleSide});
const mesh = new THREE.Mesh(geometry, material);
GlobalGroup.add(mesh);
camera.position.set(0.1, 0.1, 0.1); //调整相机位置

onUnmounted(() => {
    defaultScene.stopLoop()
})

</script>